<template>
  <a-modal
    centered
    v-model="visible"
    @cancel="cancel"
    title="接收信息"
    width="55%"
  >
    <template slot="footer">
      <a-button
        @click="cancel"
        v-if="isHandle"
        style="background: #d7d7d7; color: #fff; border: none"
        >取消</a-button
      >
      <a-button
        v-if="isHandle && TransferOutKeys != '已接收'"
        :loading="loading"
        type="primary"
        @click="handleOk"
        >保存</a-button
      >
      <a-button
        v-if="!isHandle"
        :loading="loading"
        @click="cancel"
        style="background: #d7d7d7; color: #fff; border: none"
        >关闭</a-button
      >
    </template>
    <a-table :data-source="dataSource" :pagination="false" bordered>
      <a-table-column
        key="goodsBoxNo"
        data-index="goodsBoxNo"
        align="center"
        width="10%"
      >
        <span slot="title">货物编号</span>
        <span slot-scope="text, record">
          {{ record.goodsBoxNo }}
        </span>
      </a-table-column>
      <a-table-column
        key="customBoxNo"
        data-index="customBoxNo"
        align="center"
        width="10%"
      >
        <span slot="title">自定义编号</span>
        <span slot-scope="text, record">
          {{ record.customBoxNo }}
        </span>
      </a-table-column>
      <a-table-column
        key="boxTotal"
        data-index="boxTotal"
        align="center"
        width="10%"
      >
        <span slot="title">预报箱数</span>
        <span slot-scope="text, record">
          {{ record.boxTotal }}
        </span>
      </a-table-column>
      <a-table-column
        key="boxAcceptedTotal"
        data-index="boxAcceptedTotal"
        align="center"
        width="10%"
      >
        <span slot="title">已接收箱数</span>
        <span slot-scope="text, record">
          {{ record.boxAcceptedTotal }}
        </span>
      </a-table-column>
      <a-table-column
        key="thisReceive"
        data-index="thisReceive"
        align="center"
        width="10%"
      >
        <span slot="title">本次接收箱数</span>
        <span slot-scope="text, record">
          <span style="color: #f00; margin-right: 5px" v-if="!record.isDisab"
            >*</span
          >
          <a-input-number
            v-if="!record.isDisab"
            :min="1"
            :style="
              record.thisReceive == null
                ? 'border:1px solid #f00;border-radius: 5px;'
                : ''
            "
            size="small"
            v-model="record.thisReceive"
          />
          <span v-else>
            {{ record.thisReceive }}
          </span>
        </span>
      </a-table-column>
      <!-- <a-table-column
        key="cargoCard"
        data-index="cargoCard"
        align="center"
        width="10%"
      >
        <span slot="title">货物卡板数量</span>
        <span slot-scope="text, record">
          <a-input-number
            v-if="!record.isDisab"
            size="small"
            :min="1"
            v-model="record.cargoCard"
          />
          <span v-else>
            {{ record.cargoCard }}
          </span>
        </span>
      </a-table-column> -->
      <a-table-column
        key="warehousingId"
        data-index="warehousingId"
        align="center"
        width="15%"
      >
        <span slot="title">仓位</span>
        <span slot-scope="text, record">
          <a-cascader
            size="small"
            :disabled="record.isDisab"
            :options="storageLocation"
            @change="
              (value, selectedOptions) =>
                onChangeLocation(value, selectedOptions, record)
            "
            placeholder="请选择库位"
            v-model="record.warehousingIds"
          />
        </span>
      </a-table-column>
    </a-table>
  </a-modal>
</template>

<script>
import { warehouse_select } from "@/apis/common.js";
import {
  saveItem,
  warehousingReceive,
} from "@/apis/clientSide/OrderManage/TransferIn";
export default {
  props: [
    "searchData",
    "getTransferInTableList",
    "sreachBoxInfo",
    "TransferOutKeys",
  ],
  data() {
    return {
      dataSource: [],
      isHandle: false,
      loading: false,
      //库位数据
      storageLocation: [],
      visible: false,
    };
  },
  created() {},
  mounted() {
    //扫描查看/接收
    this.$bus.$off("acceptTheDetail");
    this.$bus.$on("acceptTheDetail", async (record) => {
      this.getStorageLocation(); //获取库位
      this.isHandle = true;
      this.dataSource = [];
      this.dataSource.push(record);
      let { responseBody, code } = await warehousingReceive(
        this.searchData.transferWarehousingApplyId,
        record.transferWarehousingBoxId,
        "0"
      );
      if (code == "200") {
        responseBody.records.forEach((item) => {
          if (item.warehousingIds) {
            item.warehousingIds = item.warehousingIds.split(",");
          } else {
            item.warehousingIds = null;
          }
        });
        this.dataSource = this.dataSource.concat(responseBody.records);
      }

      this.dataSource.forEach((item) => {
        if (item.byTransferWarehousingReceiveId) {
          item.isDisab = true;
        }
        item.customBoxNo = this.dataSource[0].customBoxNo;
      });
      if (this.TransferOutKeys == "已接收") {
        this.dataSource.splice(0, 1);
      }
      this.visible = true;
    });
    //接受明细
    this.$bus.$off("acceptTheDetail2");
    this.$bus.$on("acceptTheDetail2", async (data) => {
      this.isHandle = false;
      this.getStorageLocation(); //获取库位
      this.dataSource = [];
      let { code, responseBody } = await warehousingReceive(
        data.transferWarehousingApplyId,
        -1,
        "0"
      );
      if (code == "200") {
        responseBody.records.forEach((item) => {
          if (item.warehousingIds) {
            item.warehousingIds = item.warehousingIds.split(",");
          }
          if (item.byTransferWarehousingReceiveId) {
            item.isDisab = true;
          }
          data.boxList.forEach((val) => {
            if (item.transferWarehousingBoxId == val.transferWarehousingBoxId) {
              item.customBoxNo = val.customBoxNo;
            }
          });
        });
        this.dataSource = responseBody.records;
      }
      this.visible = true;
    });
  },
  methods: {
    //关闭模态框
    cancel() {
      this.dataSource = [];
      this.visible = false;
    },
    //保存按钮
    async handleOk() {
      this.loading = true;
      let arr = JSON.parse(JSON.stringify(this.dataSource));
      if (arr[0].warehousingIds && arr[0].warehousingIds != "") {
        arr[0].warehousingIds = arr[0].warehousingIds.join(",");
      } else {
        arr[0].warehousingIds = null;
      }
      let newArr = [];
      newArr.push(arr[0]);
      if (!newArr[0].thisReceive || newArr[0].thisReceive == "") {
        this.$message.error("请填写本次接收箱数！");
        this.loading = false;
        return false;
      }
      let res = await saveItem(newArr);
      if (res.code == "10000") {
        this.getTransferInTableList();
        this.sreachBoxInfo(this.searchData.transferWarehousingApplyId);
        this.$bus.$emit(
          "TransferInRowData2",
          this.searchData.transferWarehousingApplyId,
          "look",
          "1",
          "在途中"
        );
        this.visible = false;
        this.loading = false;
      }
    },
    //仓库库位选择
    onChangeLocation(value, selectedOptions, record) {
      record.warehousingIds = value;
      if (selectedOptions) {
        record.warehousingId =
          selectedOptions[selectedOptions.length - 1].value;
        let arr = [];
        selectedOptions.forEach((item) => {
          arr.push(item.titleName);
          item.warehousingName += item.titleName;
        });
        record.warehousingNames = arr.join(",");
        record.warehousingName =
          selectedOptions[selectedOptions.length - 1].titleName;
      }
    },
    //获取仓库库位
    async getStorageLocation() {
      let _this = this;
      let { code, responseBody } = await warehouse_select({
        warehousePid: _this.searchData.warehousingId,
        isTree: true,
      });
      if (code === "200") {
        this.storageLocation = this.getSkuTypeThree(responseBody);
      }
    },
    //封装组装后台数据
    getSkuTypeThree(data) {
      data.forEach((item) => {
        item.label = item.titleName;
        item.children = item.child;
        item.value = item.warehouseId;
        item.sort = this.sort;
        if (item.children && item.children.length >= 1) {
          this.sort += 1;
          this.getSkuTypeThree(item.children);
        }
      });
      this.sort = 0;
      return data;
    },
  },
};
</script>

<style lang="less" scoped>
.ant-form-inline .ant-form-item-with-help {
  margin: 0;
}
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
</style>
